import { createStore, useStore as baseUseStore } from 'vuex'
import type { Store } from 'vuex'
import users from './modules/users'
import signs from './modules/signs'
import checks from './modules/checks'
import news from './modules/news'
import type { UsersState } from './modules/users'
import type { SignsState } from './modules/signs'
import type { ChecksState } from './modules/checks'
import type { NewsState } from './modules/news'
import type { InjectionKey } from 'vue'
import VuexPersistence from 'vuex-persist'

export interface State {
}

export interface StateAll extends State {
  users: UsersState,
  signs: SignsState,
  checks: ChecksState,
  news: NewsState
}

/**
 * 实现持久化状态
 */
const vuexLocal = new VuexPersistence<State>({
  storage: window.localStorage,
  reducer: (state: any) => {
    // 持久化存储 users 里的 token 信息
    return { users: { token: (state as StateAll).users.token }, signs: { infos: (state as StateAll).signs.infos } }
  },
})

export const key: InjectionKey<Store<StateAll>> = Symbol()

export function useStore() {
  return baseUseStore(key)
}

export default createStore({
  /**
  * 状态数据---所有的共享数据统一放到state中
  */
  state: {
  },
  /**
   * 类似于vue中的computed 计算属性，进行缓存，对于Store中的数据进行加工处理形成新的数据
   */
  getters: {
  },
  /**
  * 提供方法更改state状态数据 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  */
  mutations: {
  },
  /**
  * 类似于上面的mutations状态的异步操作 --- Actions和Mutations相似，一般情况下同步操作使用Mutations，异步操作使用Actions
  */
  actions: {
  },
  /**
   * 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。
   * 当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 
   * 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。
   * 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
   */
  modules: {
    users,
    signs,
    checks,
    news
  },
  plugins: [vuexLocal.plugin]
})
